<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拓扑图</title>
    <!--<script type="text/javascript" src="jquery-3.2.1.js"></script>-->
    <script type="text/javascript" src="esl.js"></script>
    <!-- 引入 ECharts 文件 -->
    <script type="text/javascript" src="zrender.js"></script>
    <script type="text/javascript" src="zrender-original.js"></script>
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="chartDiv" style="width: 95%;height:90%;background-color: #F0F0F0;"/>
<script type="text/javascript">
    var zr; // 全局可用zrender对象
    require(
        [
            'zrender',
            'zrender/shape/Circle'
        ],
        function (zrender, Circle) {
            // just init to get a zrender Instance
            zr = zrender.init(document.getElementById('chartDiv'));
            // zr can be used now!
            zr.addShape(
                new Circle({
                    style: {
                        x: 100,
                        y: 50,
                        r: 50,
                        color: 'rgba(220, 20, 60, 0.8)'
                    },
                    draggable: true
                })
            );

            zr.addShape(
                new Circle({
                    style: {
                        x: 200,
                        y: 50,
                        r: 50,
                        color: 'rgba(220, 20, 60, 0.8)'
                    },
                    draggable: true
                })
            );

            zr.render();
        }
    );
</script>
</body>
</html>